<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>allBooks.ejs</title>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<style>
			.books{
				width: 100%;
				height: 1800px;
				border:1px solid gold;
			
			}
			.books .left{
				width: 15%;
				height: 1800px;
				background-color: black;
				opacity: 0.5;
				float: left;
				
			}
			.books .left ul{
				height: 150px;
				border-bottom: 1px solid antiquewhite;
				margin:0 5px;
			}
			
			.books .left ul .title{
				font-size: 20px;
				font-weight: bold;
				height: 20px;
				margin: 5px 0;
			}
			.books .left ul .left-list{
				
				float: left;
				width: 50px;
				height: 30px;
				margin: 5px 2px;
			}
			#l-list-3 .left-list{
				width: 100px;
				margin: 10px 0;
			}
			#l-list-4 .left-list{
				width: 200px;
				margin: 10px 0;
			}
			.books .right{
				width: 85%;
				height: 1800px;
				
				float: right;
			}
			.books .right .bookImg{
				width: 300px;
				height: 400px;
				background-color: red;
				margin: 10px 20px;
				float: left;
			}
			.books .right .bookImg img{
				width: 100%;
			}
			.books .right .bookMessage{
				width: 800px;
				height: 400px;
				
				margin: 10px 20px;
				float: left;
			}
			.books .right .bookMessage h2,.author,.brief,.wordCount{
				margin: 10px;
			}
			.books .right .bookMessage .button-add,.button-free{
				margin: 10px;
			}
			.books .right .bookMessage .button-add input,.button-free input{
				width: 80px;
				height: 30px;
				font-size: 18px;
				font-weight: bold;
				background: red;
				color: #fff;
				outline: none;
			}
			.books .right .bookMessage .button-free input{
				background-color: white;
				color: black;
			}
			.books .right .bookMessage .brief{
				height: 200px;
				text-indent: 2em;
				
			}
			.books .right .bookDiscussion{
				width: 1400px;
				height: 1000px;
				background-color: blue;
				float: left;
				margin: 10px 20px;
			}
		</style>
	</head>
	<body>
		<% include banner.ejs %> 
		<%=bc[0]%>
		<div class="books">
			<div class="left">
				<ul>
					<li class="title">作品分类</li>
					<li class="left-list"><a href="#">玄幻</a></li>
					<li class="left-list"><a href="#">奇幻</a></li>
					<li class="left-list"><a href="#">武侠</a></li>
					<li class="left-list"><a href="#">仙侠</a></li>
					<li class="left-list"><a href="#">都市</a></li>
					<li class="left-list"><a href="#">现实</a></li>
					<li class="left-list"><a href="#">军事</a></li>
					<li class="left-list"><a href="#">历史</a></li>
					<li class="left-list"><a href="#">游戏</a></li>
					<li class="left-list"><a href="#">体育</a></li>
					<li class="left-list"><a href="#">科幻</a></li>
					<li class="left-list"><a href="#">灵异</a></li>
					<li class="left-list"><a href="#">二次元</a></li>
					<li class="left-list"><a href="#">短篇</a></li>
				</ul>
				<ul>
					<li class="title">状态</li>
					<li class="left-list"><a href="#">全部</a></li>
					<li class="left-list"><a href="#">连载</a></li>
					<li class="left-list"><a href="#">完本</a></li>
					
				</ul>
				<ul id="l-list-3">
					<li class="title">字数</li>
					<li class="left-list"><a href="#">30-50万字</a></li>
					<li class="left-list"><a href="#">50-100万字</a></li>
					<li class="left-list"><a href="#">100-200万字</a></li>
					<li class="left-list"><a href="#">200万字以上</a></li>
				</ul >
				<ul id="l-list-4">
					<li class="title">品质</li>
					<li class="left-list"><a href="#">签约作品</a></li>
					<li class="left-list"><a href="#">精品小说</a></li>
					
				</ul>
				<ul>
					<li class="title">更新时间</li>
					<li class="left-list"><a href="#">3日内</a></li>
					<li class="left-list"><a href="#">7日内</a></li>
					<li class="left-list"><a href="#">半月内</a></li>
					<li class="left-list"><a href="#">一月内</a></li>
				</ul>
			</div>
			<div class="right">
				<div class="bookImg">
					<img src="../imgs/<%=bc.bookImg%>.jpg"/>
				</div>
                <div class="bookMessage">
                	    <h2><%=bc.bookName%></h2>
						<p class="author">
							<a href="#"><%=bc.author%></a>
							<span>|</span>
							<a href="#"><%=bc.bookClass%></a>
							<span>|</span>
							<a href="#"><%=bc.state%></a>
						</p>
						<div class="brief">
							<%-bc.brief%>
						</div>
						<p class="wordCount"><%=bc.wordCount%>
							<span >
								万字
							</span>
						</p>
						<span class="button-add" ><input type="button" id="" value="加入书架"  /></span>
						<span class="button-free"><input type="button" id="" value="免费试读" /></span>
						
                </div>
                <div class="bookDiscussion">
                	评论
                </div>
			</div>
		</div>
	</body>
	
</html>